<template>
	<view>
		<uni-popup ref="showtip" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">{{ title }}</text>
				<text class="uni-tip-content">{{ content }}</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @tap="cancelEvent">取消</text>
					<text class="uni-tip-button" @tap="confirmEvent">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			title: '',
			content: '',
			confirm: Function,
			cancel: Function
		};
	},
	methods: {
		open(options) {
			Object.assign(this.$data, options);
			this.$refs.showtip.open();
		},

		confirmEvent() {
			this.$refs.showtip.close();
			this.confirm();
		},
		cancelEvent() {
			this.$refs.showtip.close();
			this.cancel();
		}
	},
	components: {
		uniPopup
	}
};
</script>

<style lang="scss">
/* 提示窗口 */
.uni-tip {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	padding: 15px;
	width: 300px;
	background-color: #fff;
	border-radius: 10px;
}

.uni-tip-title {
	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: #333;
}

.uni-tip-content {
	/* padding: 15px;
	 */
	font-size: 14px;
	color: #666;
}

.uni-tip-group-button {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	margin-top: 20px;
}

.uni-tip-button {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #3b4144;
}
</style>
